<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>index</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		
		#fullpage {
			text-align: center;
		}
		
		.section {
			position: relative;
		}
		
		.section ul {
			width: 100%;
			height: 100%;
			/*padding: 30px 18px;*/
		}
		
		.section li {
			display: block;
			float: left;
			color: #333;
			text-decoration: none;
			margin: 36px;
			transition: all 6s;
		}
		
		.section li:hover a {
			transform: scale(1.5);
		}
		
		#menu {
			margin: 0;
			padding: 0;
			position: fixed;
			left: 10px;
			top: 0;
			list-style-type: none;
			z-index: 70;
			visibility: hidden;
		}
		
		#menu li {
			float: left;
			margin: 0 auto;
			font-size: 14px;
		}
		
		#menu a {
			float: left;
			padding: 5px 10px;
			color: #333;
			text-decoration: none;
			margin: 5px;
		}
		
		#menu .active a {
			color: #fff;
			background-color: #333;
		}
		
		a {
			z-index: 2;
			color: white;
			display: inline-block;
			text-decoration: none;
			overflow: hidden;
			text-shadow: -2px -2px 2px gray;
		}
		
		a:hover {
			color: greenyellow;
		}
		
		a:visited {
			color: pink;
		}
		
		span {
			position: absolute;
			z-index: 1;
			left: 50%;
			transform: translate(-50%, -30%);
			bottom: -24px;
			font: bold 5em "microsoft yahei";
			text-shadow: 1px -1px 3px white;
		}
		
		.info1 {
			color: #0da5d6;
		}
	</style>
</head>

<body>
	<ul id="menu">
		<li data-menuanchor="page1" class="active"><a href="#page1">第一屏</a></li>
		<li data-menuanchor="page2"><a href="#page2">第二屏</a></li>
		<li data-menuanchor="page3"><a href="#page3">第三屏</a></li>
		<li data-menuanchor="page4"><a href="#page4">第四屏</a></li>
		<li data-menuanchor="page5"><a href="#page5">第五屏</a></li>
	</ul>

	<div id="fullpage">
		<!-- 第一屏 -->
		<div class="section first">
			<ul>
				<li><a href="./JsDemo/01-切换图片.html">切换图片</a></li>
				<li><a href="./JsDemo/02-隐藏显示.html">隐藏显示</a></li>
				<li><a href="./JsDemo/03-多个div隐藏显示.html">多个div隐藏显示</a></li>
				<li><a href="./JsDemo/04-禁用文本框.html">禁用文本框</a></li>
				<li><a href="./JsDemo/05-设置下拉框中的项选中.html">下拉项选中</a></li>
				<li><a href="./JsDemo/06-搜索文本框.html">搜索文本框</a></li>
				<li><a href="./JsDemo/07-获取多个文本框的值.html">获取文本框的值</a></li>
				<li><a href="./JsDemo/08-检测用户的输入.html">检测用户输入</a></li>
				<li><a href="./JsDemo/09-全选反选.html">全选反选</a></li>
				<li><a href="./JsDemo/10-隔行变色.html">隔行变色</a></li>
				<li><a href="./JsDemo/11-Tab.html">Tab</a></li>
				<li><a href="./JsDemo/12-菜单栏.html">菜单栏</a></li>
				<li><a href="./JsDemo/13-文本框高亮显示.html">高亮显示</a></li>
				<li><a href="./JsDemo/14-切换背景图片.html">切换背景图片</a></li>
				<li><a href="./JsDemo/15-动态创建祝愿墙.html">动态创建祝愿墙</a></li>
				<li><a href="./JsDemo/16-移动选定项.html">移动选定项</a></li>
				<li><a href="./JsDemo/17-动态创建在线会员列表.html">动态创建在线会员列表</a></li>
				<li><a href="./JsDemo/18-搜索文本框.html">搜索文本框</a></li>
				<li><a href="./JsDemo/19-动态创建表格.html">动态创建表格</a></li>
				<li><a href="./JsDemo/20-渐变.html">渐变</a></li>
				<li><a href="./JsDemo/21-showTime.html">showTime</a></li>
				<li><a href="./JsDemo/22-跟着鼠标飞的图片.html">跟着鼠标飞的图片</a></li>
				<li><a href="./JsDemo/23-鼠标点哪图片到哪.html">鼠标点哪图片到哪</a></li>
				<li><a href="./JsDemo/24-拖拽效果.html">拖拽效果</a></li>
				<li><a href="./JsDemo/25-放大镜.html">放大镜</a></li>
				<li><a href="./JsDemo/26-动画.html">动画</a></li>
				<li><a href="./JsDemo/27-匀速动画.html">匀速动画</a></li>
				<li><a href="./JsDemo/28-缓动动画.html">缓动动画</a></li>
				<li><a href="./JsDemo/29-封装缓动框架.html">封装缓动框架</a></li>
				<li><a href="./JsDemo/30-密码强度.html">密码强度</a></li>
				<li><a href="./JsDemo/31-表单验证.html">表单验证</a></li>
				<li><a href="./JsDemo/32-响应式布局原理.html">响应式布局原理</a></li>
				<li><a href="./JsDemo/固定导航/DemoJS.html">固定导航</a></li>
				<li><a href="./JsDemo/左右焦点图/DemoJS.html">左右焦点图</a></li>
				<li><a href="./JsDemo/开机动画/DemoJS.html">开机动画</a></li>
				<li><a href="./JsDemo/手风琴特效/DemoJS.html">手风琴特效</a></li>
				<li><a href="./JsDemo/旋转木马/demo.html">旋转木马</a></li>
				<li><a href="./JsDemo/无缝滚动原理/DemoJS.html">无缝滚动</a></li>
				<li><a href="./JsDemo/筋斗云案例/DemoJS.html">筋斗云案例</a></li>
				<li><a href="./JsDemo/美女相册/Demo3.html">美女相册</a></li>
				<li><a href="./JsDemo/轮播图/5-完善鼠标经过.html">轮播图</a></li>
			</ul>
			<span>JavaScript Demo</sapn>

		</div>
		<!-- 第二屏 -->
		<div class="section second">
			<ul>
				<li><a href="./H5Demo/01-网站经典布局.html">网站经典布局</a></li>
				<li><a href="./H5Demo/02-学生档案.html">学生档案</a></li>
				<li><a href="./H5Demo/03-Tab标签.html">Tab标签</a></li>
				<li><a href="./H5Demo/04-首字下沉.html">首字下沉</a></li>
				<li><a href="./H5Demo/05-日历.html">日历</a></li>
				<li><a href="./H5Demo/06-文本阴影.html">文本阴影</a></li>
				<li><a href="./H5Demo/07-浮雕文字案例.html">浮雕文字案例</a></li>
				<li><a href="./H5Demo/08-盒模型.html">盒模型</a></li>
				<li><a href="./H5Demo/09-安卓机器人.html">安卓机器人</a></li>
				<li><a href="./H5Demo/10-边框圆角.html">边框圆角</a></li>
				<li><a href="./H5Demo/11-渐变.html">渐变</a></li>
				<li><a href="./H5Demo/12-自适应背景.html">自适应背景</a></li>
				<li><a href="./H5Demo/13-全屏背景.html">全屏背景</a></li>
				<li><a href="./H5Demo/14-过渡-汽泡.html">过渡-汽泡</a></li>
				<li><a href="./H5Demo/15-过渡-手风琴菜单.html">过渡-手风琴菜单</a></li>
				<li><a href="./H5Demo/16-2D转换-缩放scale.html">2D转换-缩放scale</a></li>
				<li><a href="./H5Demo/17-2D转换-移动translate.html">2D转换-移动translate</a></li>
				<li><a href="./H5Demo/18-2D转换-旋转rotate.html">2D转换-旋转rotate</a></li>
				<li><a href="./H5Demo/19-2D转换-原点transform-origin.html">2D转换-原点transform-origin</a></li>
				<li><a href="./H5Demo/20-2D转换-倾斜skew.html">2D转换-倾斜skew</a></li>
				<li><a href="./H5Demo/21-2D转换-任意元素居中.html">2D转换-任意元素居中</a></li>
				<li><a href="./H5Demo/22-2D转换-阴影特效.html">2D转换-阴影特效</a></li>
				<li><a href="./H5Demo/23-3D转换-旋转rotate(X、Y、X).html">旋转rotate(X、Y、Z)</a></li>
				<li><a href="./H5Demo/24-3D转换-移动translate(X、Y、Z).html">移动translate(X、Y、Z)</a></li></li>
				<li><a href="./H5Demo/25-3D转换-透视perspective.html">3D转换-透视perspective</a></li>
				<li><a href="./H5Demo/26-3D转换-立方体.html">3D转换-立方体</a></li>
				<li><a href="./H5Demo/27-CSS3动画translate.html">CSS3动画translate</a></li>
				<li><a href="./H5Demo/28-CSS3动画rotateZ.html">CSS3动画rotateZ</a></li>
				<li><a href="./H5Demo/29-CSS3动画keyframes.html">CSS3动画keyframes</a></li>
				<li><a href="./H5Demo/30-大海波涛.html">大海波涛</a></li>
				<li><a href="./H5Demo/31-动态进度条.html">动态进度条</a></li>
				<li><a href="./H5Demo/32-全屏切换.html">全屏切换</a></li>
				<li><a href="./H5Demo/33-跳动的心.html">跳动的心</a></li>
				<li><a href="./H5Demo/34-宇宙.html">宇宙</a></li>
				<li><a href="./H5Demo/35-钟表.html">钟表</a></li>
				<li><a href="./H5Demo/36-多列布局.html">多列布局</a></li>
				<li><a href="./H5Demo/37-伸缩布局-携程旅行.html">伸缩布局-携程旅行</a></li>
				<li><a href="./H5Demo/360Demo/360demo.html">360demo</a></li>
				<span>H5+CSS3 Demo</sapn>
			</ul>
		</div>
		<!-- 第三屏 -->
		<div class="section third">
			<ul>
				<li><a href="./CanvasDemo/FlappyBird/game.html">FlappyBird</a></li>
				<li><a href="./CanvasDemo/particles/粒子.html">粒子</a></li>
				<li><a href="./CanvasDemo/图像裁剪/04-头像裁剪案例的补充.html">头像裁剪</a></li>
				<li><a href="./CanvasDemo/帧动画/01-精灵对象.html">精灵对象原地踏步</a></li>
				<li><a href="./CanvasDemo/帧动画/02-精灵对象走动起来.html">精灵对象走动起来</a></li>
				<li><a href="./CanvasDemo/帧动画/03-改变间隔时间.html">精灵对象奔跑起来</a></li>
				<li><a href="./CanvasDemo/帧动画/04-精灵有独立的帧率.html">精灵对象走动的优化</a></li>
				<!--<li><a href="./CanvasDemo/简单像素处理/01-灰白化.html">像素处理-灰白化</a></li>-->
				<!--<li><a href="./CanvasDemo/简单像素处理/02-反色.html">像素处理-反色</a></li>-->
				<!--<li><a href="./CanvasDemo/简单像素处理/03-查找边缘.html">像素处理-查找边缘</a></li>-->
				<!--<li><a href="./CanvasDemo/简单像素处理/04-颜色矩阵.html">像素处理-颜色矩阵</a></li>-->
				<span>Canvas Demo</sapn>
			</ul>
		</div>
		<!-- 第四屏 -->
		<div class="section fourth">
			<ul>
				<li><a href="./HTML+CSS/index.html">仿京东首页</a></li>
				<span>HTML+CSS</sapn>
			</ul>
		</div>
		<!-- 第五屏 -->
		<!--<div class="section fifth">-->
		<!--	<span>JavaScript Demo</sapn>-->
		<!--</div>-->
	</div>
	<script src="./jquery.min.js"></script>
	<script src="./jquery.fullPage.min.js"></script>
	<script>
		$('#fullpage').fullpage({
			// 设置背景色
			sectionsColor : ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
			anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
			afterLoad: function (anchorLink, index) {
				$('.section').removeClass('current');
				
				// 延时100毫秒执行
				setTimeout(function () {
					$('.section').eq(index - 1).addClass('current');
				}, 100);

			}
		});
		var colors = ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'];

		var index = 0;
		var arr = document.getElementsByTagName("span");
		for (var i = 0; i < arr.length; i++) {
			var link = this.arr[i];
			link.style.color = colors[index];
			index++;
		}


	</script>
</body>

</html>